<template>
    <div>
        <!-- /.u-menu -->
        <div class="u-main">
          <div class="u-tab-wrap">
            <ul class="u-tab clearfix">
              <li class="current"><a>我的优惠券</a></li>
            </ul>
          </div>
          <div id="tab-box">
            <div id="repay_list_box" class="u-form-wrap" style="padding: 15px;">
              <div style="margin-bottom: 20px;">
                <el-table
                  :data="coupons"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    prop="couponId"
                    label="编号"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="couponName"
                    label="名称"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="couponMoney"
                    label="金额">
                  </el-table-column>
                  <el-table-column
                    prop="couponTime"
                    label="使用期限"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="couponCondition"
                    label="使用条件"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="couponStatus"
                    label="状态">
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                      <el-button  @click="handleClick(scope.row)" type="primary" style="margin-left: 16px;">
                        详情
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-drawer
                  title="我是标题"
                  :visible.sync="drawer"
                  :with-header="false">
                  <p style="font-size: 24px">用户名：{{user.userAccount}}</p>
                  <p style="font-size: 24px">手机号：{{user.userPhone}}</p>
                  <p style="font-size: 24px">昵称：{{user.userNickname}}</p>
                  <p style="font-size: 24px">性别：{{user.userSex}}</p>
                  <p style="font-size: 24px">邮箱：{{user.userEmail}}</p>
                  <p style="font-size: 24px">注册时间：{{$moment(user.userRegistertime).format('YYYY-MM-DD')}}</p>
                  <p style="font-size: 24px">账户余额：{{user.userAmount}}</p>
                  <p style="font-size: 24px">邀请码：{{user.userCode}}</p>
                  <p style="font-size: 24px">优惠券名称：{{coupon.couponName}}</p>
                  <p style="font-size: 24px">优惠券金额：{{coupon.couponMoney}}</p>
                  <p style="font-size: 24px">使用期限：{{coupon.couponTime}}</p>
                  <p style="font-size: 24px">使用条件：{{coupon.couponCondition}}</p>
                </el-drawer>
                <!--分页-->
                <div class="block">
                  <span class="demonstration"></span>
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
                  </el-pagination>
                </div>

              </div>
            </div>
              <div class="page-wrap">
              </div>
            </div>
          </div>
    </div>
</template>

<script>
    export default {
      name: "",
      data(){
          return{
            coupons:[],
            /*分页数据*/
            totalCount:1,
            currentPage:1,
            pageSizes:[1,2,3,4],
            pageSize:4,
            /*详情侧拉框*/
            drawer: false,

            coupon:{},
            user:{}
          }
      },
      methods:{
        /*侧拉框*/
        handleClick:function(row){
          this.drawer=true
          /*查询用户和优惠券信息*/
          this.axios.post("/api/coupon/findcouponbyid",{couponId:row.couponId}).then((data)=>{
            this.coupon=data.data.coupon
            this.user=data.data.user
          })
        },
        // 每页显示的条数
        handleSizeChange(val) {
          this.pageSize=val
          this.currentPage=1
          this.handleCurrentChange(1)  //刷新表格
        },
        // 显示第几页
        handleCurrentChange(val) {
          this.currentPage=val
          /*发送请求根据当前页码获取分页数据*/
          this.axios.post("/api/coupon/findsinglecouponpage",{pageNum:this.currentPage,pageSize:this.pageSize}).then((data)=>{
            this.coupons=data.data.list
            this.totalCount=data.data.total
          })
        }
      },
      /*初始化表格数据*/
      created() {
        this.axios.post("/api/coupon/findallcoupon").then((data)=>{
          this.coupons=data.data.list
          this.totalCount=data.data.total
        })
      }
    }
</script>

<style scoped>
  @import  '../../assets/usercss/css/UserCSS.css';

</style>
